import React, { useRef, useState } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import type { ActionType, ProColumns } from '@ant-design/pro-table';
import { message, Tag, Space, Modal, Drawer } from 'antd';
import ProList from '@ant-design/pro-list';
import { deleteUsingPOST1, selectUsingPOST2 } from '@/services/test/Post';
import moment from 'moment';
import AddDrawer from './components/AddDrawer';
import { ExclamationCircleOutlined } from '@ant-design/icons';
import ProDescriptions from '@ant-design/pro-descriptions';
import { history } from 'umi';

const Index: React.FC = () => {
  const actionRef = useRef<ActionType>();
  const [showDetail, setShowDetail] = useState<boolean>(false);
  const [currentRow, setCurrentRow] = useState<any>();

  const onDelete = (values: any) => {
    Modal.confirm({
      title: '您确认要删除该条信息吗?',
      icon: <ExclamationCircleOutlined />,
      content: '删除后不可恢复，请谨慎决定',
      onOk: async () => {
        await deleteUsingPOST1({ id: values }).then(() => {
          message.success('删除成功');
          actionRef.current?.reload();
        });
      },
      onCancel() {
        console.log('Cancel');
      },
    });
  };

  const desColumn: ProColumns<any>[] = [
    {
      title: '岗位名称',
      dataIndex: 'name',
    },
    {
      title: '所属院部',
      dataIndex: 'college',
    },
    {
      title: '招聘人数',
      dataIndex: 'number',
    },
    {
      title: '学历要求',
      dataIndex: 'education',
    },
    {
      title: '学位要求',
      dataIndex: 'degree',
    },
    {
      title: '职位描述',
      dataIndex: 'description',
      search: false,
    },
    {
      title: '职位要求',
      dataIndex: 'require',
    },
  ];

  const getList = async (params?: any) => {
    const res = await selectUsingPOST2({ ...params, valid: true });
    return res;
  };

  const onAdd = () => {
    actionRef.current?.reload();
    return true;
  };

  return (
    <>
      <PageContainer>
        <ProList<any>
          toolBarRender={() => {
            return [<AddDrawer onChange={() => onAdd()} />];
          }}
          search={{}}
          rowKey="id"
          // headerTitle="基础列表"
          request={getList}
          actionRef={actionRef}
          pagination={{
            pageSize: 10,
          }}
          onRow={(record: any) => {
            return {
              onClick: () => {
                setShowDetail(true);
                setCurrentRow(record);
              },
            };
          }}
          // showActions="hover"
          metas={{
            title: {
              dataIndex: 'name',
              title: '岗位名称',
            },
            // avatar: {
            //   dataIndex: 'avatar',
            //   search: false,
            // },
            description: {
              render: (text: any, record: any) => {
                return (
                  <div>
                    {record.education} | {record.degree}
                  </div>
                );
              },
              search: false,
            },
            subTitle: {
              render: (text: any, record: any) => {
                return (
                  <Space size={0}>
                    <Tag color="blue">{record.college}</Tag>
                    <Tag color="#5BD8A6">招{record.number}人</Tag>
                  </Space>
                );
              },
              search: false,
            },
            actions: {
              render: (text, row) => [
                <a
                  key="link"
                  onClick={() => {
                    console.log(row);
                    history.push(`/candidate?postId=${row.name}`);
                  }}
                >
                  候选人
                </a>,
                <a key="delete" onClick={() => onDelete(row.id)}>
                  删除
                </a>,
                <a
                  key="view"
                  onClick={() => {
                    setShowDetail(true);
                    setCurrentRow(row);
                  }}
                >
                  查看详情
                </a>,
              ],
              search: false,
            },
            college: {
              // 自己扩展的字段，主要用于筛选，不在列表中显示
              title: '学院',
              valueType: 'select',
              valueEnum: {
                信息与控制学院: { text: '信息与控制学院' },
                纺织服装学院: { text: '纺织服装学院' },
                经济管理学院: { text: '经济管理学院' },
                艺术与设计学院: { text: '艺术与设计学院' },
                人文与国际交流学院: { text: '人文与国际交流学院' },
                建筑工程学院: { text: '建筑工程学院' },
                后勤类: { text: '后勤类' },
              },
            },
          }}
        />
        <Drawer
          width={600}
          visible={showDetail}
          onClose={() => {
            setCurrentRow(undefined);
            setShowDetail(false);
          }}
          closable={false}
        >
          {currentRow?.id && (
            <>
              <ProDescriptions
                column={1}
                title={'岗位信息'}
                request={async () => ({
                  data: currentRow || {},
                })}
                columns={desColumn}
                style={{ whiteSpace: 'pre-wrap' }}
                bordered
              >
                <ProDescriptions.Item label={'投递时间'}>
                  {moment(currentRow?.startTime).format('YYYY-MM-DD')}-
                  {moment(currentRow?.deadline).format('YYYY-MM-DD')}
                </ProDescriptions.Item>

                {/* TODO 改成人名或者删除 */}
                {/* <ProDescriptions.Item label={'创建人'}>
                  {currentRow?.utcCreate}
                </ProDescriptions.Item> */}
              </ProDescriptions>
            </>
          )}
        </Drawer>
      </PageContainer>
    </>
  );
};

export default Index;
